import { Routes, Route, Link } from "react-router-dom";

import "./App.css";
import Task from "./views/Task";
import Counter from "./views/Counter";
import Home from "./views/Home";
import PostList from "./views/PostList";
import PostDetail from "./views/PostList/PostDetail";
function App() {
  return (
    <>
      <ul>
        <li>
          <Link to={"/task"}>task</Link>
        </li>
        <li>
          <Link to={"/"}>home</Link>
        </li>
        <li>
          <Link to={"/counter"}>counter</Link>
        </li>
        <li>
          <Link to={"/post"}>post</Link>
        </li>
      </ul>
      <div className="App">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/task" element={<Task />} />
          <Route path="/counter" element={<Counter />} />
          <Route path="/post" element={<PostList />} />
          <Route path="/post/:id" element={<PostDetail />} />
        </Routes>
      </div>
    </>
  );
}

export default App;
